@mixin paddingModel($t,$r:$t,$b:$t,$l:$r){
    padding:$t $r $b $l;
}
@mixin marginModel($t,$r:$t,$b:$t,$l:$r){
    margin:$t $r $b $l;
}
@mixin width($w,$p:0px,$m:0px){
    padding-left:$p;
    padding-right:$p;
    margin-left:$m;
    margin-right:$m;
    width:calc($w - $p - $p - $m - $m);
}
@mixin height($h,$p:0px,$m:0px){
    padding-top:$p;
    padding-bottom:$p;
    margin-top:$m;
    margin-bottom:$m;
    height:calc($h - $p - $p - $m - $m);
}
@mixin model($w,$h,$p,$m){

}
// 盒模型
@mixin box($w,$h,$t:"row"){
    @include width(100%);
    @include height(100%,30px,60px);
    position:relative;
    display: flex;
    // width:$w;
    // height:$h;
    @if $t == "row" {
        flex-direction: row;
    }
    @if $t == "col" {
        flex-direction: column;
    }
    @if $t == "col-both" {
        flex-direction: column;
        justify-content: space-between;
    }
    @if $t == "row-both" {
        flex-direction: row;
        justify-content: space-between;
    }
}

// 九宫格布局
@mixin layout($r:top,$c:left){
    @if $r == top {
        align-items: flex-start;
    }
    @if $c == left {
        justify-content: flex-start;
    }
    @if $r == center {
        align-items: center;
    }
    @if $c == center {
        justify-content: center;
    }
    @if $r == bottom {
        align-items: flex-end;
    }
    @if $c == right {
        justify-content: flex-end;
    }
}
// 子元素尺寸设置
@mixin item__grid($w,$h,$t:row){
    display: flex;
    flex:0 0 $w;
    @if $t == row{
        height:$h;
    }
    @if $t == row-both{
        height:$h;
    }
    @if $t == col{
        width:$h;
    }
    @if $t == col-both{
        width:$h;
    }
}
// 盒子模型测试
@mixin box__model(){
    @include box(calc(100% - 290px),600px,row);
    @include layout(center,center);
 }
@mixin box__model--layout(){
    $r:col;
    @include box(calc(100% - 290px),600px,$r);
    @include layout(center,center);
     border:1px solid red;
    .box__item{
        @include item__grid(500px,200px,$r);
    }
}

.box{
    @include box(100%,100%,row);
    @include layout(center,center);
    background: blue;
    .main{
        @include item__grid(calc(100% - 100px),500px,row);
        @include layout(center,right);
        padding-right:100px;
        background: rgba(0,0,0,.2);
        >div{
            width: 400px;
            height: 90%;
            background: #fff;
        }
    }
}